<template>
	<view class="contain qxlj_back4">
		<view style="font-size: 12px;text-align: center;">{{$t('complaint.disclaimer')}}</view>
		<view class="border_list">
			<view class="textBox" style="border-radius: 10px 10px 0 0;">
				<view class="tOne">
					<text>{{$t('complaint.name')}}</text>
				</view>
				<input type="text" :placeholder="$t('complaint.namePlaceholder')" v-model="userComplaintInfo.name" />
			</view>
			<view class="textBox">
				<view class="tOne">
					<text>{{$t('complaint.gender')}}</text>
				</view>
				<input type="text" @click="touch(1)" v-model="userComplaintInfo.sex" disabled="true" />
			</view>
			<view class="textBox">
				<view class="tOne">
					<text class="">{{$t('complaint.mobile')}}</text>
					<text class="warn">{{$t('complaint.required')}}</text>
				</view>
				<input type="number" v-model="userComplaintInfo.phoneNumber" :placeholder="$t('complaint.mobilePlaceholder')" />
			</view>
			<view class="textBox" @click="touch(2)">
				<view class="tOne">
					<text class="">{{$t('complaint.feedbackType')}}</text>
					<text class="warn">{{$t('complaint.required')}}</text>
				</view>
				<input type="text" v-model="userComplaintInfo.complaintType" :placeholder="$t('complaint.feedbackTypePlaceholder')" disabled="true" />
			</view>
		</view>
		<view class="border_list">
			<view class="textBox" style="border-radius: 10px 10px 0 0;">
				<view class="tTwo">
					<text class="">{{$t('complaint.complaintTarget')}}</text>
					<text class="warn">{{$t('complaint.required')}}</text>
				</view>
				<input type="text" v-model="userComplaintInfo.beComplaint" :placeholder="$t('complaint.complaintTargetPlaceholder')" />
			</view>
			<view class="textareaBox">
				<view class="">
					<text>{{$t('complaint.content')}}<text class="warn">{{$t('complaint.required')}}</text></text>
					<text class="fr">{{userComplaintInfo.contain.length}}/500</text>
				</view>
				<textarea v-model="userComplaintInfo.contain" :placeholder="$t('complaint.contentPlaceholder')" maxlength="500" />
			</view>
			<view class="textareaBox">
				<view class="header">
					<text>{{$t('complaint.image')}}</text>
				</view>
				<view class="imgBox">
					<block v-for="(item,index) in imgList" :key="index">
						<view class="imgMenu">
							<view class="renderImg">
								<image :src="item" mode="aspectFill" @click="previewImg(item)"></image>
							</view>
							<view class="deleteImg" @click="deleteImg(index)">
								<image src="../../static/yqimg/cl.png" mode="widthFix"></image>
							</view>
						</view>
					</block>
					<view class="imgMenu" @click="chooseImg()" v-if="imgList.length<9">
						<image src="../../static/img/upImg.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<button @click="submit()" :disabled="isSubmit">{{$t('complaint.submit')}}</button>
		</view>
		<!-- 弹出框 -->
		<wyb-popup ref="popup" type="bottom" height="300" width="500" :showCloseIcon="false">
			<view class="popup-content">
				<view class="popupMsg" v-for="(item,index) in renderMsg.menu" :key="index"
					@click="choice(renderMsg.type,item)">{{item}}</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import {
		addComplaint
	} from '@/api/homePage.js'
	import Config from '@/config/index.js'
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				myType: '',
				renderMsg: [],
				sex: {
					type: "sex",
					menu: []
				},
				complaint: {
					type: "complaint",
					menu: []
				},
				userComplaintInfo: {
					name: '',
					sex: '',
					phoneNumber: '',
					complaintType: '',
					beComplaint: '',
					title: '',
					contain: ''
				},
				imgList: [],
				isSubmit: false
			}
		},
		computed: {
			genderOptions() {
				return [
					this.$t('complaint.genderOptions.male'),
					this.$t('complaint.genderOptions.female'),
					this.$t('complaint.genderOptions.secret')
				];
			},
			feedbackOptions() {
				return [
					this.$t('complaint.feedbackOptions.complaint'),
					this.$t('complaint.feedbackOptions.suggestion')
				];
			}
		},
		mounted() {
			this.sex.menu = this.genderOptions;
			this.complaint.menu = this.feedbackOptions;
			this.userComplaintInfo.sex = this.$t('complaint.genderOptions.secret');
		},
		methods: {
			touch(e) {
				console.log(e, 3333)
				if (e == 1) {
					this.renderMsg = this.sex;
				} else if (e == 2) {
					console.log('!@#!@#')
					this.renderMsg = this.complaint;
				}
				this.$refs.popup.show() // 显示
				// this.$refs.popup.hide() // 隐藏
			},
			touchType() {
				console.log('13123')
			},
			// 提交
			submit() {
				let checkPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (checkPhone.test(this.userComplaintInfo.phoneNumber) == false) {
					uni.showToast({
						title: this.$t('complaint.enterValidMobile'),
						icon: 'none',
						duration: 1000
					});
					return;
				};
				if (this.userComplaintInfo.beComplaint == '' || this.userComplaintInfo.beComplaint == null) {
					uni.showToast({
						title: this.$t('complaint.enterComplaintTarget'),
						icon: 'none',
						duration: 1000
					});
					return;
				};
				if (this.userComplaintInfo.complaintType == '' || this.userComplaintInfo.complaintType == null) {
					uni.showToast({
						title: this.$t('complaint.selectFeedbackType'),
						icon: 'none',
						duration: 1000
					});
					return;
				};
				if (this.userComplaintInfo.contain == '' || this.userComplaintInfo.contain == null) {
					uni.showToast({
						title: this.$t('complaint.enterContent'),
						icon: 'none',
						duration: 1000
					});
					return;
				};
				this.addNewComplaint();
			},
			async addNewComplaint() {
				if (this.userComplaintInfo.complaintType == this.$t('complaint.feedbackOptions.suggestion')) {
					this.myType = 2
					console.log('建议')
				} else if (this.userComplaintInfo.complaintType == this.$t('complaint.feedbackOptions.complaint')) {
					this.myType = 1
					console.log('投诉')
				}
				this.isSubmit = true;
				try {
					const {
						Data,
						ErrorCode,
						Msg
					} = await addComplaint({
						FeedbackCategoryId: this.myType,
						ContactPhone: this.userComplaintInfo.phoneNumber,
						Title: this.userComplaintInfo.title,
						FeedbackContent: this.userComplaintInfo.contain,
						TransportNo: this.userComplaintInfo.beComplaint,
						ImgList: this.imgList
					})

          uni.showToast({
            title: this.$t('complaint.submitSuccess'),
            icon: 'success',
            duration: 2000
          });

          // 返回上一页，回到列表页面
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
				} catch (e) {
					//TODO handle the exception
				}
			},
			choice(type, e) {
				if (type == 'sex') {
					this.userComplaintInfo.sex = e;
				} else if (type == 'complaint') {
					this.userComplaintInfo.complaintType = e;
					console.log('123123', e)
				}
				this.$refs.popup.hide() // 隐藏
			},
			chooseImg() { //上传照片
				let _this = this;
				if (_this.imgList.length < 9) {
					let num = 9 - _this.imgList.length;
					uni.chooseImage({
						count: num, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							res.tempFilePaths.forEach((item) => {
								uni.uploadFile({
									url: Config.baseUrl + '/API/Users/PictureUpload',
									filePath: item,
									name: 'file',
									success: (uploadFileRes) => {
										let imgList = JSON.parse(uploadFileRes.data);
										_this.imgList = [..._this.imgList, imgList
											.picturePath
										];
									}
								});
							})

						}
					});
				} else {
					uni.showToast({
						title: this.$t('complaint.uploadLimit'),
						icon: 'none',
						duration: 1000
					})
				}
			},
			previewImg(e) { //图片预览
				uni.previewImage({
					urls: [e],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			deleteImg(e) {
				this.imgList.forEach((item, index) => {
					if (e == index) {
						this.imgList.splice(index, 1);
					}
				})
			},
		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
.contain {
	width: 100%;
	min-height: 100vh;
	padding: 20rpx;
	background-color: #F5F6F7;

	> view:first-child {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		padding: 20rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
	}

	.border_list {
		border-radius: 16rpx;
		background: #FFFFFF;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.textBox {
		width: 100%;
		min-height: 100rpx;
		padding: 0 32rpx;
		border-bottom: 1rpx solid #EEEEEE;
		background-color: #fff;
		display: flex;
		align-items: center;

    &:last-child{
      border-bottom: none;
    }

		.tOne, .tTwo {
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
		}

		.tOne {
			width: 30%;
		}

		.tTwo {
			width: 40%;
		}

		input {
			flex: 1;
			height: 100rpx;
			font-size: 28rpx;
			color: #333333;

			&::placeholder {
				color: #999999;
			}

			&[disabled] {
				background: none;
				color: #666666;
			}
		}
	}

	.textareaBox {
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #EEEEEE;

		> view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			text {
				font-size: 28rpx;
				color: #333333;
				font-weight: 400;
			}
		}

		.warn {
			color: #FF5B5B;
			margin-left: 4rpx;
		}

		.fr {
			color: #999999;
			font-size: 24rpx;
		}

		textarea {
			width: 100%;
			padding: 20rpx;
			min-height: 240rpx;
			font-size: 28rpx;
			color: #333333;
			background: #F7F8FA;
			border-radius: 12rpx;
			line-height: 1.6;
      box-sizing: border-box;

			&::placeholder {
				color: #999999;
			}
		}

		.imgBox {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			gap: 24rpx;
      justify-content: flex-start;

			.imgMenu {
				width: calc((100% - 48rpx) / 3);
				height: 200rpx;
				position: relative;
				background: #F7F8FA;
				border-radius: 8rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				&:active {
					opacity: 0.8;
				}

				.renderImg {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				> image {
          width: 100%;
          height: 100%;
				}

				.deleteImg {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					width: 40rpx;
					height: 40rpx;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
	}

	.btnBox {
    margin-top: 20rpx;
		button {
      height: 86rpx;
      background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
      color: #FFFFFF;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 44rpx;
      transition: all 0.3s ease;
      letter-spacing: 2rpx;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(73,143,255,0.2);
      }

			&[disabled] {
				opacity: 0.5;
				background: #999999;
			}
		}
	}
}

.popupMsg {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333333;
	border-bottom: 1rpx solid #EEEEEE;

	&:active {
		background-color: #F7F8FA;
	}
}

/deep/ .wyb-popup {
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
}
</style>
